<template>
  <el-dialog
    :title="problemInfo.faqName"
    :visible.sync="isshow"
    width="700px"
    @close="close"
  >
    <div v-loading="!problemInfo.faqName">
      <div class="title">问题详情：</div>
      <div v-html="problemInfo.faqStem"></div>
      <div class="title second">问题解答：</div>
      <div v-html="problemInfo.faqAnswer"></div>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="close">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>
import { getfaqDetail } from '@/api/commonproblem/problem'

export default {
  components: {},
  name: 'problemdetail',
  data() {
    return {
      isshow: false,
      faqId: '',
      problemInfo: {}
    }
  },
  mounted() {
  },
  methods: {
    show(id) {
      this.faqId = id
      this.getdetail()
      this.isshow = true
    },
    // 获取详情
    async getdetail() {
      let res = await getfaqDetail(this.faqId)
      if (res.code == 200) {
        console.log(res.data)
        this.problemInfo = res.data
      }

    },
    close() {
      this.problemInfo = {}
      this.isshow = false
    }

  }
}
</script>
<style scoped lang="scss">
.problemTitle {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

.second {
  margin-top: 20px;
}
</style>
